<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0000_画圆</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(300, 300, 100, 0, (Math.PI / 180) * 90, true); // false 顺时针 true 是逆时针
  ctx.closePath();
  // ctx.stroke() // 通过线条来绘制图形
  ctx.fillStyle = 'red';
  ctx.fill(); // 通过填充路径绘制实心图形

</script>
</html>